<template>
  <div>
      <!-- 星期 -->
    <dl class="select">
      <dt class="cur">{{$t('jiemu_xingqi1')}},{{$t('jiemu_xingqi2')}},{{$t('jiemu_xingqi3')}},{{$t('jiemu_xingqi4')}},{{$t('jiemu_xingqi5')}},{{$t('jiemu_xingqi6')}},{{$t('jiemu_xingqi7')}}</dt>
      <dd>
        <ul style="margin-left:2px;">
          <li class="current">
            <input type="checkbox" name id="check_box11" class="css-checkbox" value="1" checked/>
            <label for="check_box11" class="css-label">{{$t('jiemu_xingqi1')}}</label>
          </li>
          <li>
            <input type="checkbox" name id="check_box12" class="css-checkbox" value="2" checked/>
            <label for="check_box12" class="css-label">{{$t('jiemu_xingqi2')}}</label>
          </li>
          <li>
            <input type="checkbox" name id="check_box13" class="css-checkbox" value="3" checked/>
            <label for="check_box13" class="css-label">{{$t('jiemu_xingqi3')}}</label>
          </li>
          <li>
            <input type="checkbox" name id="check_box14" class="css-checkbox" value="4" checked/>
            <label for="check_box14" class="css-label">{{$t('jiemu_xingqi4')}}</label>
          </li>
          <li>
            <input type="checkbox" name id="check_box15" class="css-checkbox" value="5" checked/>
            <label for="check_box15" class="css-label">{{$t('jiemu_xingqi5')}}</label>
          </li>
          <li>
            <input type="checkbox" name id="check_box16" class="css-checkbox" value="6" checked/>
            <label for="check_box16" class="css-label">{{$t('jiemu_xingqi6')}}</label>
          </li>
          <li>
            <input type="checkbox" name id="check_box17" class="css-checkbox" value="7" checked/>
            <label for="check_box17" class="css-label">{{$t('jiemu_xingqi7')}}</label>
          </li>
        </ul>
      </dd>
    </dl>
  </div>
</template>


<style>
.select {
  display: block;
  position: relative;
  float: left;
  font-size: 15px;
  width: 202px;
}

.select dt {
  height: 34px;
  display: inline-block;
  background: #e9ebfe url("../../../../static/img/timex.png") no-repeat 181px 13px;
  line-height: 34px;
  color: #545eff;
  cursor: pointer;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  position: relative;
  z-index: 99;
  border-radius: 6px;
  padding: 0 33px 0 8px;
  width: 100%;
}

.select dd {
  width: 100%;
  position: absolute;
  left: 0;
  top: 34px;
  background: #e9ebfe;
  display: none;
  border-radius: 0 0 6px 6px;
  z-index: 100;
}
.select dd ul {
  height: 95px;
  /* max-height: 250px; */
  overflow: auto;
}

.select dd ul li {
  display: block;
  line-height: 27px;
  height: 25px;

}
.select dd ul li label {
  color: #b0b2c5;
  font-size: 15px;
}

.select dd ul li:hover {
  background: #dadeff;
}
.select dd ul li.current {
  background: #c1c7ff;
}

input[type="checkbox"].css-checkbox + label.css-label {
  background-position: -1190px -61px;
}

input[type="checkbox"].css-checkbox:checked + label.css-label {
  background-position: -1190px -91px;
  color: #545eff;
}
</style>
<script>
$(function() {
  //带复选框下拉列表
  $(".select dt").click(function() {
    //默认隐藏所有的复选下拉框
    $(".select dd").hide();
    var s = $(this).parent(".select");
    s.children("dd").slideToggle(200);
    return false;
  });


  $(".select dd ul li input").click(function() {
    var arrlabel = [];
    var s = $(this).closest(".select");
    var myLi = s.find("li");
    myLi.each(function(i) {
      var myInp = $(this).children("input");
      var myLabel = $(this)
        .children("label")
        .text();
      if (myInp.is(":checked")) {
        arrlabel.push(myLabel);
        $(this).find("input").attr("checked", true);
      }else{
        $(this).find("input").attr("checked", false);

      }
      //将选中label值赋给 dt (ps.将数组转换成字符串)
      var labels = arrlabel.join(",");
      s.find("dt").text(labels);
     
    });
  });

  //点击页面空白处 多选框下拉消失
  $(document).bind("click", function(e) {
    //点击空白处，设置的弹框消失
    var _list = $(".select dd");
    if (!_list.is(e.target) && _list.has(e.target).length === 0) {
      _list.slideUp();
    }
  });
});
</script>